<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="height: 100%; margin: 0">
    <!-- <div
      id="img"
      style="position: absolute; top: -10px; left: 0; right: 0; text-align: center;;"
    >
      <h1>全年任务指标完成占比</h3>
    </div> -->
    <div id="container1" style="width: 50%; height: 49%; float: left"></div>
    <div id="container2" style="width: 50%; height: 49%; float: left"></div>
    <div id="container3" style="width: 50%; height: 49%; float: left"></div>
    <div id="container4" style="width: 50%; height: 49%; float: left"></div>

    <script type="text/javascript" src="./echarts.js"></script>
    <!-- Uncomment this line if you want to dataTool extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/extension/dataTool.min.js"></script>
  -->
    <!-- Uncomment this line if you want to use gl extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
  -->
    <!-- Uncomment this line if you want to echarts-stat extension
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
  -->
    <!-- Uncomment this line if you want to use map
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
  -->
    <!-- Uncomment these two lines if you want to use bmap extension
  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/extension/bmap.min.js"></script>
  -->

    <script type="text/javascript">
      var dom1 = document.getElementById("container1");
      var dom2 = document.getElementById("container2");
      var dom3 = document.getElementById("container3");
      var dom4 = document.getElementById("container4");
      var myChart1 = echarts.init(dom1, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
      var myChart2 = echarts.init(dom2, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
      var myChart3 = echarts.init(dom3, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
      var myChart4 = echarts.init(dom4, null, {
        renderer: "canvas",
        useDirtyRect: false,
      });
      var label = {
        show: true,
        formatter: "{b}\n{c}万元\n占比{d}%",
        fontSize: 14,
        alignTo: "labelLine",
      };

      const bgPatternSrc =
        "";

      const bgPatternImg = new Image();
      bgPatternImg.src = bgPatternSrc;
      var sjitemStyle = {
        borderColor: "#030852",
        borderWidth: 0,
        // color: {
        //   image: bgPatternImg,
        //   repeat: "repeat",
        // },
      };
      var labelLine = {
        show: true,
        length: 100,
        length2: 50,
        lineStyle: {
          color: "#030852",
          width: "2",
        },
      };
      var sjLabel = {
        show: true,
        position: "center",
        // formatter: [`{b|实际完成:{c}万}`, `占比{d}%`].join("\n"),
        formatter: (params) => {
          console.log(params)
          const { value, total } = params.data
          const percent = (value/total * 100).toFixed(2)
          return  [`{b|实际完成:${value}万}`, `占比${percent}%`].join("\n")
        },
        rich: {
          b: {
            color: "#000",
            // backgroundColor: '#fff',
            width: 220,
            height: 30,
            // padding: [10,0,0,0],
            align: "center",
            fontSize: 14,
          },
        },
      };
      var hideStyle = {
        itemStyle: {
          color: "none",
          decal: {
            symbol: "none",
          },
        },
        label: {
          show: false,
        },
      };

      var color = ["#097ba0", "#9eca7f", "#f2ca6b", "#de6e6a"];
      var shijiColor = "#5a6fc0",
      chaoeColor = "#91caff",
        pieRadius = ["48%", "60%"],
        gridWidth = "38%",
        gridHeight = "38%";
      var grid = [{ x: "13%", y: "40%", width: gridWidth, height: gridHeight }];
      var center = ["50%", "63%"];
      var innerRadius = "44%";
      var dataName = ["第一季度", "第二季度", "第三季度", "第四季度"];
      var titleStyle = {
        top: 30,
        left: "center",
        textStyle: {
          fontSize: 22,
        },
        subtextStyle: {
          fontSize: 18,
          fontWeight: 700,
        },
      };
      var dataValue1 = [55872.54, 120000, 130000, 150000];
      var dataValue2 = [130000, 70000, 250000, 250000];
      var dataValue3 = [140000, 140000, 210000, 210000];
      var dataValue4 = [16000, 18000, 31000, 35000];
      var dataValue1sj = [351942.3];
      var dataValue2sj = [281469.62];
      var dataValue3sj = [467063.65];
      var dataValue4sj = [102938.95];
      option1 = {
        title: {
          text: "济南一建集团",
          subtext: "2023年目标任务45亿元,截至目前累计实际完成351942.30万元",
          ...titleStyle,
        },
        color,
        legend: {
          show: false,
        },
        grid,
        series: [
          {
            type: "pie",
            label,
            data: [
              { value: dataValue1[0], name: dataName[0] },
              { value: dataValue1[1], name: dataName[1] },
              { value: dataValue1[2], name: dataName[2] },
              { value: dataValue1[3], name: dataName[3] },
            ],
            radius: pieRadius,
            center,
          },
          {
            type: "pie",
            label,
            color: shijiColor,
            data: [
              {
                value: dataValue1sj[0],
                name: dataName[0] + "完成",
                itemStyle: sjitemStyle,
                total: dataValue1.reduce((a, c) => a + c, 0) 
              },
              {
                value: dataValue1.reduce((a, c) => a + c, 0) - dataValue1sj[0],
                ...hideStyle,
              },
            ],
            labelLine,
            label: sjLabel,
            radius: innerRadius,
            center,
          },
        ],
      };
      option2 = {
        title: {
          text: "山东三箭集团",
          subtext: "2023年目标任务70亿元,截至目前累计实际完成281469.62万元",
          ...titleStyle,
        },
        color,
        legend: {
          show: false,
        },
        grid,

        series: [
          {
            type: "pie",
            label,
            data: [
              { value: dataValue2[0], name: dataName[0] },
              { value: dataValue2[1], name: dataName[1] },
              { value: dataValue2[2], name: dataName[2] },
              { value: dataValue2[3], name: dataName[3] },
            ],
            radius: pieRadius,
            center,
          },
          {
            type: "pie",
            label,
            color: shijiColor,
            data: [
              {
                value: dataValue2sj[0],
                name: dataName[0] + "完成",
                itemStyle: sjitemStyle,
                total: dataValue2.reduce((a, c) => a + c, 0) 
              },
              {
                value: dataValue2.reduce((a, c) => a + c, 0) - dataValue2sj[0],
                ...hideStyle,
              },
            ],
            labelLine,
            label: sjLabel,
            radius: innerRadius,
            center,
          },
        ],
      };
      option3 = {
        title: {
          text: "济南四建集团",
          subtext: "2023年目标任务70亿元,截至目前累计实际完成467063.65万元",
          ...titleStyle,
        },
        color,
        legend: {
          show: false,
        },
        grid,

        series: [
          {
            type: "pie",
            label,
            data: [
              { value: dataValue3[0], name: dataName[0] },
              { value: dataValue3[1], name: dataName[1] },
              { value: dataValue3[2], name: dataName[2] },
              { value: dataValue3[3], name: dataName[3] },
            ],
            radius: pieRadius,
            center,
          },
          {
            type: "pie",
            label,
            color: shijiColor,
            data: [
              {
                value: dataValue3sj[0],
                name: dataName[0] + "完成",
                itemStyle: sjitemStyle,
                total: dataValue3.reduce((a, c) => a + c, 0) 
                
              },
              {
                value: dataValue3.reduce((a, c) => a + c, 0) - dataValue3sj[0],
                ...hideStyle,
              },
            ],
            labelLine,
            label: sjLabel,
            radius: innerRadius,
            center,
          },
        ],
      };
      option4 = {
        title: {
          text: "济南安装公司",
          subtext: "2023年目标任务10亿元，截至目前累计实际完成102938.95万元",
          ...titleStyle,
        },
        color,
        legend: {
          show: false,
        },
        grid,
        series: [
          {
            type: "pie",
            label,
            data: [
              { value: dataValue4[0], name: dataName[0] },
              { value: dataValue4[1], name: dataName[1] },
              { value: dataValue4[2], name: dataName[2] },
              { value: dataValue4[3], name: dataName[3] },
            ],
            radius: pieRadius,
            center,
          },
          {
            type: "pie",
            label: {
              show: false
            },
            color: shijiColor,
            data: [
              {
                value: dataValue4sj[0],
                name: dataName[0] + "完成",
                total: dataValue4.reduce((a, c) => a + c, 0) 
              },
              {
                value: dataValue4.reduce((a, c) => a + c, 0) - dataValue4sj[0],
                ...hideStyle,
              },
            ],
            labelLine,
            label: sjLabel,
            radius: "45%",
            center,
          },
          {
            type: "pie",
            data: [
              {
                value: (dataValue4sj[0] - dataValue4.reduce((a, c) => a + c, 0)).toFixed(2),
                name: dataName[0],
                itemStyle: {
                  color: chaoeColor
                }
              },
              {
                value: (dataValue4.reduce((a, c) => a + c, 0) * 2 - dataValue4sj[0]).toFixed(2),
                ...hideStyle,
              },
            ],
            label: {
              show: false,
              position: "center",
              formatter: [`{b|超额完成:{c}万}`].join("\n"),
              rich: {
                b: {
                  color: "#000",
                  // backgroundColor: '#fff',
                  width: 220,
                  height: 30,
                  // padding: [10,0,0,0],
                  align: "center",
                  fontSize: 14,
                  fontWeight: 700
                },
              },
            },
            radius: "45%",
            center,
          },
        ],
      };
      myChart1.setOption(option1);
      myChart2.setOption(option2);
      myChart3.setOption(option3);
      myChart4.setOption(option4);

      window.addEventListener("resize", myChart1.resize);
    </script>
  </body>
</html>
